<template>
  <div class="home">
    <el-container>
      <el-container>
        <el-container>
          <el-main>
            <div class="banner">
              <div class="banner-info">
                <table>
                  <thead>
                    <tr>
                      <th></th>
                      <th></th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>冷冻水送水温度</td>
                      <td>7.0</td>
                      <td>°C</td>
                    </tr>
                    <tr>
                      <td>冷冻水回水温度</td>
                      <td>11.2</td>
                      <td>°C</td>
                    </tr>
                    <tr>
                      <td>室外湿球温度</td>
                      <td>24.0</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>制冷机房COP</td>
                      <td>4.25</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>冷源COP</td>
                      <td>5.68</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>冷机平均COP</td>
                      <td>5.26</td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>

              </div>
            </div>
          </el-main>
        </el-container>
        <el-aside width="20%">
          <SetPlate></SetPlate>
        </el-aside>
      </el-container>
      <el-footer>
        <div class="footer-box">
          <div class="item">

            <div class="item-tit">
              <i class="iconfont icon-nengxiaoguanli"></i>
              节能状态
            </div>
            <div class="score-box">
              <span class="score-tit">总体评分</span> 
              <span class="score">56.6</span>
            </div>
            <div id="radar_1" style="width: 100%;height:2.3rem;"></div>
          </div>
          <div class="item">
            <SafetyAlarm title="安全报警" :data="data" :radioOptions="radioOptions" icon="icon-jinggao" />
          </div>
          <div class="item">
            <SafetyAlarm title="安全报警2" :data="data1" icon="icon-shandian" :radioOptions="radioOptions3" />
          </div>
          <div class="item">
            <SafetyAlarm title="功能实现" :data="data2" icon="icon-gongneng" :radioOptions="radioOptions2" />
          </div>
          
        </div>
      </el-footer>
    </el-container>




  </div>
</template>

<script>
import SafetyAlarm from '@/components/base/SafetyAlarm.vue'
import SetPlate from '@/components/base/SetPlate.vue'
export default {
  name: 'HomeView',
  components: {
    SafetyAlarm,
    SetPlate,
  },
  data() {
    return {
      radio: 1,
      radio2: 6,
      input1: '',
      input2: '',
      input3: '',

      data: [
        { name: "1#冷机蒸发压力偏低", radio: 'secondary' },
        { name: "2#冷机冷凝压力过高", radio: 'secondary' },
        { name: "1#水泵电流偏大", radio: 'secondary' },
        { name: "1#水泵电流偏大", radio: 'secondary' },
      ],
      data1: [
        { name: "集水器各路回水温度不一致", radio: 'secondary' },
        { name: "2#冷机冷凝压力过高", radio: 'secondary' },
        { name: "1#水泵电流偏大", radio: 'secondary' },
        { name: "1#水泵电流偏大", radio: 'secondary' },
      ],
      radioOptions3: [
        { label: '重要告警', value: 'secondary' },
        { label: '严重告警', value: 'serious' },
      ],
      radioOptions: [
        { label: '一般告警', value: 'secondary' },
        { label: '次要告警', value: 'serious' },
      ],
      data2: [
        { name: "1#冷机出水温度", radio: 'meet' },
        { name: "1#冷机出水温度", radio: 'meet' },
        { name: "1#水泵电流偏大", radio: 'meet' },
        { name: "1#水泵电流偏大", radio: 'meet' },
      ],
      radioOptions2: [
        { label: '满足', value: 'meet' },
        { label: '轻偏', value: 'light' },
        { label: '重偏', value: 'heavy' },
      ],
    }
  },
  computed: {
    count() {
      return this.data.filter(item => item.radio).length;
    }
  },
  methods: {
    triangleChart() {
      var myChart = this.$echarts.init(document.getElementById('radar_1'));
      // 指定图表的配置项和数据
      var option = {
        legend: {
          bottom: 0,
          data: ['总评分'],
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '节能指数', max: 100 },
            { name: '安全指数', max: 100 },
            { name: '功能指数', max: 100 },
          ],
          radius: 40,//缩放
          center: ['50%', '60%'],//位置
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            itemStyle: {
              color: 'red',
            },

            data: [
              {
                value: [40, 70, 60],
                name: '总评分',
                label: {
                  show: true,

                  color: '#e3f2fe',
                  backgroundColor: '#0e5bd3b3',
                  borderRadius: 3,
                  padding: [3, 5],
                  formatter: function (params) {
                    return params.value;
                  },
                },

              },
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted() {
    this.triangleChart()
  },

}
</script>
<style lang="less" scoped>
.el-main {
  // background-color: pink;

  .banner {
    width: 100%;
    height: 100%;
    // background-color: #018073;
    background-image: url('@/assets/imgs/index.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // background-color: aquamarine;
    position: relative;

    .banner-info {
      position: absolute;
      right: 1rem;
      top: 0.5rem;
      color: #10a7ff;
      font-size: 0.25rem;

      th,
      td {

        padding: 0.05rem;

      }

      table td:nth-child(2) {
        color: #984807;
      }

    }
  }
}

.el-aside {
  // height: 70vh;
  // background-color: aquamarine;
  padding: 0.1rem;
  // background-color: antiquewhite;
}

.el-footer {
  // background-color: red;
  height: 40% !important;
  padding: 0.1rem;
  font-size: 0.1rem;

  .footer-box {
    display: flex;
    justify-content: space-between;

    .item {
      width: 24%;
      border: 2px solid #10a7ff;
      // height: 100%;
      background-color: #fff;
      border-radius: 0.1rem;
      padding: 0.12rem;
      position: relative;
      .score-box{
          color: #10a7ff;
          position: absolute;
          left: 30px;
          top: 46px;
          .score-tit{
            font-size: 0.25rem;
            padding-right: 0.1rem;
          }
          .score{
            color: #b97119;
            font-size: 0.2rem;
          }
        }
      .item-tit {
        // width: 20%;
        color: #10a7ff;
        position: absolute;
        font-weight: 700;
        
        i {
          font-weight: 700;
        }
      }
    }

  }
}
</style>